<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="lib/CodeMirror-0.93/js/codemirror.js" type="text/javascript"></script>
    <script src="lib/CodeMirror-0.93/js/mirrorframe.js" type="text/javascript"></script>
    <title>CodeMirror: JavaScript demonstration</title>
	<script src="lib/codemirror-ui/js/codemirror-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="lib/codemirror-ui/css/codemirror-ui.css" type="text/css" media="screen">
    <link rel="stylesheet" type="text/css" href="lib/CodeMirror-0.93/css/docs.css"/>
	<script type="text/javascript">
		function resizedit(){	
			toolbar = document.getElementsByClassName("codemirror-ui-button-frame")[0];
			editarea = document.getElementsByClassName("CodeMirror-wrapping")[0];
			editarea.style.height = (document.body.clientHeight - toolbar.offsetHeight).toString() + "px";
		}
		window.onresize = resizedit;
		window.onload = resizedit;
		
	</script>
	<style>
		html body{
                height: 100%;
            }
            
            div{
                /*height: 100% !important;*/
            }
            
            .nopadding {
                padding: 0;
                margin: 0;
                border: 0;
            }
.fullscreen {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  z-index: 9999;
  margin: 0;
  padding: 0;
  background: inherit;
}

.CodeMirror-wrapping{
	border: 0 !important;
}
.CodeMirror-line-numbers { 
			font-size: 10pt; 
			color:#000099;
			margin: 0.4em; 
			font-family: monospace; 
			text-align: right; 
			line-height:	17px;
			background-color: #eee;}
</style>	
  </head>
  <body class="nopadding">


<div class="fullscreen">
<textarea id="code">
&lt;html>
  &lt;head>
    &lt;title>HTML Example&lt;/title>
    &lt;script type="text/javascript">
      function foo(bar, baz) {
        alert("quux");
        return bar + baz + 1;
      }
    &lt;/script>
    &lt;style type="text/css">
      div.border {
        border: 1px solid black;
        padding: 3px;
      }
      #foo code {
        font-family: courier, monospace;
        font-size: 80%;
        color: #448888;
      }
    &lt;/style>
  &lt;/head>
  &lt;body>
    &lt;p>Duh&lt;/p>
  &lt;/body>
&lt;/html>
</textarea>
</div>

<script type="text/javascript">
 var textarea = document.getElementById('code');
    //var editor = new MirrorFrame(CodeMirror.replace(textarea)
  var uiOptions = { path : 'lib/codemirror-ui/js/', quickSearch : true, buttons : ['undo','redo','jump','reindent', 'reindentSelection'] }
  var codeMirrorOptions = {
    //height: "350px",
    content: textarea.value,
    parserfile: [ "parsehtmlmixed.js", "parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js",],
    stylesheet: ["lib/CodeMirror-0.93/css/xmlcolors.css", "lib/CodeMirror-0.93/css/jscolors.css", "lib/CodeMirror-0.93/css/csscolors.css"],
    path: "lib/CodeMirror-0.93/js/",
    autoMatchParens: true,
	lineNumbers: true,
	disableSpellcheck: false,

  }
   var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
 /* //var editor = new CodeMirror(CodeMirror.replace(textarea),codeMirrorOptions);
    var editor = CodeMirror.fromTextArea('code', {
    height: "350px",
    parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js", "parsehtmlmixed.js"],
    stylesheet: ["lib/CodeMirror-0.93/css/xmlcolors.css", "lib/CodeMirror-0.93/css/jscolors.css", "lib/CodeMirror-0.93/css/csscolors.css"],
    path: "lib/CodeMirror-0.93/js/",
  });*/	
</script>

  </body>
</html>
